
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 分支</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-分支FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="分支 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link current">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>分支</h1>
    
    <p>分支功能用于实现项目的多态设计，例如多国语言版本下UI的差别，又例如多个渠道版本下UI的差别。</p>
<p>网络上可以搜索到不少这方面的方案，总的来说可以分成两类，一类是各种语言版本建立完全独立的工程，另一类是通过代码或者配置文件进行运行时调整。前者会给迭代带来很高的代价，后者则完全依赖程序员，无法在设计期所见即所得。</p>
<p>FairyGUI解决这类问题的方案是分支，在设计期完全所见即所得，可以直接在FairyGUI编辑器看到各个版本的效果。</p>
<h2 id="分支机制"><a href="#分支机制" class="headerlink" title="分支机制"></a>分支机制</h2><p>分支的用途是对主干进行部分修改。我们都是首先在主干上开发，然后在项目的任何阶段，都可以建立任意多个分支。<strong>注意，它和代码仓库中的分支概念不一样。UI分支不包含主干的资源，它只放置与主干有差别的内容。</strong></p>
<p><img src="../../images/QQ20191210-162300.png" alt></p>
<p>这种机制不但作用于图片，也同样作用于组件和字体等所有类型资源。例如，如果有一个需求，某个UI界面，在不同分支下，整个界面的布局完全不同。那么我们同样可以在分支下放置相同路径和名称的组件。又例如，我们常用的位图字体在国际化时，也要面临不同语言使用不同素材的问题，而分支机制也支持位图字体。</p>
<h2 id="创建分支"><a href="#创建分支" class="headerlink" title="创建分支"></a>创建分支</h2><p>在“项目设置-&gt;分支”里点击<img src="../../images/QQ20191209-160453.png" alt>创建一个新分支。分支的名称建议使用英文。</p>
<p>分支创建后，在项目主目录会增加一个新的资源目录。假设分支名称是en，那么它的资源文件夹为“项目主目录/assets_en”。新分支创建后这个目录是空的，下面我们还要给包创建分支。</p>
<p>首先在主工具栏切换项目到分支：</p>
<p><img src="../../images/QQ20191210-201635.png" alt></p>
<p>然后在资源库里右键点击包，在右键菜单里选择“创建分支”。</p>
<p><img src="../../images/QQ20191210-205005.png" alt></p>
<p>这样指定包就有了一个en的分支。这时在“项目主目录/assets_en”内也增加了一个新目录，目录包就是包名，如图所示：</p>
<p><img src="../../images/QQ20191210-205055.png" alt></p>
<p>其中package_branch.xml是分支的数据库文件，和<a href="package.html#包的定义">package.xml</a>是类似的功能。</p>
<h2 id="资源映射"><a href="#资源映射" class="headerlink" title="资源映射"></a>资源映射</h2><p>在编辑器内，分支就和包里的一个普通的文件夹没有任何区别，你可以向这个文件夹添加资源，也可以从其他地方移入或者粘贴资源，没有任何限制。按照分支的机制，分支和主干的资源只要路径和名称完全一致，他们就会自动建立一个映射关系。</p>
<p><strong>演示一</strong></p>
<p>向主干导入一个face.png <img src="../../images/QQ20191210-210524.png" alt>，分支也导入一个face.png <img src="../../images/QQ20191210-210605.png" alt>，然后在主干上新建一个组件Component1，把主干的face.png拖进去：</p>
<p><img src="../../images/QQ20191210-210734.png" alt></p>
<p>然后在主工具栏切换分支到en，可以看到Component1的显示变成：</p>
<p><img src="../../images/QQ20191210-210845.png" alt></p>
<p>这就是分支的机制的最简单的一个演示。</p>
<p><strong>演示二</strong></p>
<p>下面我们再来演示一下直接将整个组件做分支。在分支en下新建一个组件，名称也为Component1，这样主干/Component1和en/Component1就建立一个映射。</p>
<p>我们切换分支到en，<strong>如果直接打开主干/Component1，你会发现舞台的内容是不会直接显示成en/Component1的，这是因为你是直接打开主干/Component1进行编辑。</strong></p>
<p>现在我们在主干上新建一个Component2，然后拖入主干的Component1，我们再切换分支到en，这时就可以发现Component2内的Component1已经显示为en/Component1的内容了。</p>
<p><strong>演示三</strong></p>
<p>我们在资源库中直接把en/face删除，你会发现主干/Component1中显示的图片会立刻切换回主干的face图片。这说明主干和分支的关系是弱连接，如果这种连接关系存在，则分支起作用；如果不存在，是不会不影响主干的内容的。</p>
<h2 id="分支与控制器首页"><a href="#分支与控制器首页" class="headerlink" title="分支与控制器首页"></a>分支与控制器首页</h2><p>在实际应用中，我们还会遇到在不同版本下，界面上的某些元件需要微调的情况。如果我们按上述方案建立一个组件的分支，那么每次界面需要修改时，同步修改所有分支也会成为一个负担。对于这种微小的差异，我们引入了控制器首页与分支名称匹配的机制。</p>
<p><img src="../../images/QQ20191210-221456.png" alt></p>
<p>如上图，控制器的首页设置为“匹配分支名称”，然后设定了索引1的页面的名称为en。那么<strong>当组件创建的时候</strong>，如果当前分支是en，控制器就会自动切换到索引为1的页面；如果当前分支不是en，那控制器还是停留在索引为0的页面。</p>
<p><strong>演示四</strong></p>
<p><img src="../../images/QQ20191210-224850.png" alt></p>
<p>在主干/Component1里，我们已经按上图定义好了控制器的首页，并且给图片加了一个位置控制，然后点测试（控制器首页功能必须在测试中才有效）：</p>
<p><img src="../../images/2019-12-10-22_52_42.gif" alt></p>
<p>可以看到当分支切换时，c1的首页发生了改变，图片的位置也随之发生了改变。<strong>（注意：分支切换并不能直接导致控制器的改变，编辑器内的分支切换实际上是重新启动了测试，也就是组件是重新创建的，所以首页功能起到作用）。</strong></p>
<h2 id="发布分支"><a href="#发布分支" class="headerlink" title="发布分支"></a>发布分支</h2><p>分支发布处理方式有两种：</p>
<ul>
<li><p><code>主干包含所有分支</code> 发布结果包含主干以及所有分支的内容。发布的内容放置在“发布路径”，而非“分支发布路径”。使用这种处理方式，可以在运行时再决定切换到哪个分支。</p>
<p>例如主干有一个face.png，分支en也有一个face.png，那么发布结果就含有两个face.png。运行时实际显示哪个图片，由代码设置的活跃分支名称决定。</p>
</li>
<li><p><code>主干合并活跃分支</code> 发布结果包含主干合并当前活跃分支后的内容。也就是说，无论当前分支是什么，发布结果首先都包含所有主干的内容，然后查看哪些资源有分支映射关系的，就用分支的代替主干的。当主工具栏上分支的设置为主干时，发布出来的结果放置在“发布路径”；当设置为某个分支时，发布出来的结果放置在“分支发布路径/分支名称”。</p>
<p>例如主干有一个face.png，分支en也有一个face.png，如果主工具栏上分支的设置为主干，那么发布出来的结果放置在“发布路径”，包里的face.png是主干的face.png；如果主工具栏上分支的设置为en，那么发布出来的结果放置在“分支发布路径/en”，包里的face.png是分支en里的face.png。</p>
</li>
</ul>
<h2 id="运行时使用分支"><a href="#运行时使用分支" class="headerlink" title="运行时使用分支"></a>运行时使用分支</h2><p>无论分支使用哪种方式发布，运行时都要通过代码设置正确的分支名称。</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">UIPackage.branch = <span class="string">"en"</span>;</span><br></pre></td></tr></table></figure>
<p>设置分支名称可以在AddPackage之后，但应该在创建任何UI之前。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/branch.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
